<html>

    <head>
        <link rel="stylesheet" href="http://39.97.184.176/css/chat2.css">
        <link rel="stylesheet" href="http://39.97.184.176/css/buttom.css">
        <link rel="stylesheet" href="http://39.97.184.176/css/divider.min.css">
        <script type="text/javascript" src="http://39.97.184.176/js/jquery.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                //当用户第一次访问本页或者刷新本页时，生成id
                //引导用户输入名字
                $("#inputname").hide();
                $("#cover").hide();
                $("#chatcontent").focus();
                var id = parseInt(Math.random()*100);
                var name = "";
                var index = -1;
                generateName();
                //点击发送，发送信息
                $("#send").click(function () {
                    if(name === ""){
                        // alert("请输入名称");
                        // $("#cover").show();
                        // $("#inputname").show();
                        //停止使用用户输入昵称的方式，使用系统自动生成的方式
                        return;
                    }
                    var text = $("textarea").val();
                    if (text == "") {
                        alert("说些什么吧");
                    } else {
                        console.log(text);
                        var content = $("textarea").val();
                        $.ajax({
                            //https://book.feelyou.top/search/
                            url: "http://39.97.184.176/send?name=" + name + "&content=" + content +"&uid=" + id ,
                            async: true,
                            dataType: "json",
                            success: function (data) {
                                console.log(data);

                            }
                        })
                        $("textarea").val("");
                        getMessage();
                    }
                });

                //随机生成用户昵称的函数
                function generateName(){
                    var names = new Array("陆展元","李莫愁","杨过","程英","陆无双","公孙绿萼","穆念慈","殷素素","张翠山","谢逊","张三丰","张无忌","程灵素","郭襄","袁紫衣");
                    var index = Math.floor(Math.random()*14);
                    name = names[index];
                }
                //每隔一段时间从服务器获取数据
                function getMessage(){
                    $.ajax({
                        url:"http://39.97.184.176/get?index="+index,
                        async:false,
                        dataType: "json",
                        success: function(data){
                            if(data != undefined && data != null && data.length != 0){

                                index = data.length + index;
                                for(var i = 0 ; i <data.length ; i++){
                                    createCard(data[i]);
                                }
                            }
                        }
                    })
                }

                //刷新时执行getMessage();
                getMessage();
                
                setInterval(getMessage,1000);

                //getMessage();
                //提交名字的函数
                $("#tijiao").click(function(){
                    var text = $("#nameinput").val();
                    name = text;
                    $("#inputname").hide();
                    $("#cover").hide();
                });

                /**
                 * <div class="chat-not-me">
                 <div class="others-name">新垣结衣</div>
                 <div class="chat-words">
                 亲爱的，晚上早点回来呦😊
                 </div>
                 </div>
                 * @param text
                 */
                //制作信息的函数
                function createCard(obj) {
                    var tempObj = JSON.parse(obj);

                    var chat = document.createElement("div");
                    var userName = document.createElement("div");
                    var chatWords = document.createElement("div");
                    if(tempObj.uid === id){
                        chat.className = "chat-me";
                        userName.className = "myname";
                        chatWords.className = "my-chat-words";
                    } else {
                        chat.className = "chat-not-me";
                        userName.className = "others-name"
                        chatWords.className = "chat-words";
                    }

                    userName.innerText = tempObj.name;
                    chatWords.innerText = tempObj.content;

                    chat.appendChild(userName);
                    chat.appendChild(chatWords);


                    //插入
                    var chatContent = document.getElementsByClassName("chat-content")[0];
                    chatContent.appendChild(chat);
                    //div.scrollTop = div.scrollHeight;
                    chatContent.scrollTop = chatContent.scrollHeight;
                }


            });
        </script>
    </head>

    <body>
        <div id="cover">

        </div>
        <!-- 输入名字的框框 -->
        <div id="inputname">
            <div style="margin-top:2rem;margin-left:2rem;font-size:2rem;">
                请输入昵称
            </div>
            <div class="ui input focus" style="margin-left:2rem;margin-top:2rem;">
                <input type="text" placeholder="输入昵称.." id="nameinput" style="font-size:1.7rem;">
                <button class="ui  button" style="margin-left:15px;display: inline;" id="tijiao" style="font-size:2.5rem;">提交</button>
            </div>
            
        </div>

        <div class="chat-window">
            <div class="chat-title">
                Gakki' Room
            </div>

            <div class="chat-content" id="chatcontent">

            </div>

            <div class="ui divider"></div>

            <div class="my-send">
                <textarea rows="2" class="textarea" placeholder="说些什么吧"></textarea>
                <div class="send-button">
                    <button class="ui primary button send-it" id="send" style="font-size:2rem;">发送</button>
                    <span class="send-it-text"></span>
                 </div>
            </div>
        </div>
    </body>

</html>